<template>
  <div class="MyInfo" :style="styles.infoStyle">
    <slot name="before" />
    <img class="flex-shrink-0" :src="src || defaultUser" :style="styles.imgStyle" />
    <div
      v-if="text"
      class="text flex-shrink-0"
      :class="{ shrink: shrink }"
      :style="styles.textStyle"
    >
      {{ text }}
    </div>
    <slot name="after" />
  </div>
</template>
<script setup lang="jsx">
defineOptions({ name: 'MyInfo' })
import defaultUser from '@/assets/default-user.png'
const props = defineProps({
  src: {
    type: String,
    default: '',
  },
  text: {
    type: [String, Number],
    default: '',
  },
  size: {
    type: String,
    default: 'mini',
    validator: (value) => {
      return ['big', 'mini'].includes(value)
    },
  },
  shrink: {
    type: Boolean,
    default: false,
  },
})
const obj = {
  big: {
    infoStyle: {
      gap: '8px',
    },
    imgStyle: {
      width: '28px',
      height: '28px',
      borderRadius: '50%',
    },
    textStyle: {
      fontSize: '20px',
      fontWeight: 'bold',
      color: '#030912',
    },
  },
  mini: {
    infoStyle: {
      gap: '4px',
    },
    imgStyle: {
      width: '22px',
      height: '22px',
      borderRadius: '50%',
    },
    textStyle: {
      fontSize: '14px',
      fontWeight: '400',
      color: ' #3A3E4',
    },
  },
}
const styles = computed(() => obj[props.size])
</script>
<style lang="scss" scoped>
.MyInfo {
  display: flex;
  align-items: center;
  .text.shrink {
    max-width: calc(100% - 60px);
    min-width: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: break-word;
    word-break: break-all;
  }
}
</style>
